<template>
	<view style="height: 100%;">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">选择需要@的用户</block>
		</cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view v-for="(item,index) in dataList" :key="index">
				<list-user-item @changeStatus="changeStatus(index)" :chooseMode="true" @click="jumpToUserProfile(item.user_id)" :userInfo="item"></list-user-item>
			</view>
		</mescroll-body>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white foot action flex justify-around align-center padding-top" style="width: 100%;">
			<button @tap="clearAction" class="cu-btn round bg-grey" style="width: 40%;">清空选择</button>
			<button @tap="commitAction" :class="'cu-btn round '+themeColor" style="width: 40%;">确定添加</button>
		</view>
	</view>
</template>

<script>
	import ListUserItem from '@/components/list-user-item.vue'
	import {
		getTimeDistance,
		cutDateFromDateTime
	} from '@/api/utils.js'
	import {
		getUserAttentionList
	} from '@/api/api.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import config from '@/api/config.js'
	export default {
		components: {
			ListUserItem
		},
		name:"AttentionList",
		mixins: [MescrollMixin],
		data() {
			return {
				passAtUsers:[],
				themeColor:this.ThemeColor,
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '您还没有关注任何人'
					}
				},
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			let that = this
			eventChannel.on('passUserList', function(data) {
			    that.passAtUsers = data
				that.resetUserListStatus()
			})
		},
		methods: {
			commitAction() 
			{
				let choosedUserList = []
				this.dataList.forEach(item => {
					if (item.checked) {
						choosedUserList.push(item)
					}
				})
				console.log(choosedUserList)
				if(choosedUserList.length > 9) {
					uni.showModal({
						title:'数量限制',
						content:'最多允许@人数为9个，您当前选择了'+choosedUserList.length+'个'
					})
					return
				}
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('finishChoose', choosedUserList);
				uni.navigateBack({
					delta: 1
				})
			},
			clearAction() 
			{
				this.dataList.forEach(item=>{
					item.checked = false
				})
			},
			resetUserListStatus() 
			{
				this.dataList.forEach(item=>{
					let findChoose = false
					this.passAtUsers.forEach(pItem=>{
						if(pItem.user_id == item.user_id) {
							findChoose = true
						}
					})
					item.checked = findChoose
				})
			},
			changeStatus(index) 
			{
				this.dataList[index].checked = !this.dataList[index].checked
			},
			jumpToUserProfile(userId) 
			{
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + userId
				})
			},
			getDataList(pageIndex, pageSize) {
				getUserAttentionList(pageIndex, pageSize).then(res => {
					res.data.list.forEach(item => {
						item.show_time = cutDateFromDateTime(item.created_at)
						let findChoose = false
						this.passAtUsers.forEach(pItem=>{
							if(pItem.user_id == item.user_id) {
								findChoose = true
							}
						})
						item.checked = findChoose
					})
					let pageList = res.data.list
					if (pageIndex == 0) {
						this.dataList = pageList
					} else {
						this.dataList = this.dataList.concat(pageList)
					}
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(this.dataList.length, hasNext);
					}
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
				})
			},
			downCallback() {
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.getDataList(pageIndex, page.size)
			}
		}
	}
</script>

<style>
</style>
